import { Modal, Card, Form, InputNumber, Button, Space, Breadcrumb, Select, DatePicker, Switch, Input,message } from 'antd';
import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
import React, { useState } from 'react';

// 使用日期格式
import moment from 'moment'
// 日期格式
import locale from 'antd/es/date-picker/locale/zh_CN';

import { useResSeckill } from "../../hook/seckill_res"
// eslint-disable-next-line
export const Seckill_res = () => {
  const [{
    name, Price, restricted,
    Total, Sold, Start_time, End_time, Sale_type, State
}, { addReSeckills, updataDataToSever }] = useResSeckill()
  const dateFormat = 'YYYY-MM-DD HH:mm:ss';
  const { Option } = Select;
  const { RangePicker } = DatePicker;
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleOk = async() => {
    const result=await updataDataToSever()
    console.log("返回值",result);
    // result._id?message.success(''): message.error('失败请重试');
    setIsModalVisible(false);


  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };

  /* eslint-disable no-template-curly-in-string */
  const validateMessages = {
    required: '${label}必须填写!',
    types: {
      email: '${label} is not a valid email!',
      number: '${label} is not a valid number!',
    },
    number: {
      range: '${label} must be between ${min} and ${max}',
    },
  };
  // 表单提交的时候的表单数据值
  const onFinish = (values) => {
    addReSeckills({ ...values.seckill })
    setIsModalVisible(true);
  }
  // 选择类型后出发的函数
  function onChange(value) {
    const Sale_type = value
    addReSeckills({ Sale_type })
  }
  // 日期切换后出发的函数
  function getDate(dates, dateStrings, info) {
    const Start_time = dateStrings[0]
    const End_time = dateStrings[1]
    addReSeckills({ Start_time, End_time })

  }
  // 状态改变时触发的函数
  function StateChange(checked) {
    const State = checked ? "1" : "0"
    addReSeckills({ State })

  }


  return (
    <Space direction="vertical" style={{ width: "100%" }}>
        <Card >
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/#/info/seckill_list">秒杀活动</a>
                    </Breadcrumb.Item> 
                    <Breadcrumb.Item>
                        <a href="/#/info/seckill_res">修改活动</a>
                    </Breadcrumb.Item>            
                </Breadcrumb>

            </Card>

      <Card >
        <Form {...layout} name="form" onFinish={onFinish} validateMessages={validateMessages}
          style={{ width: 500, marginTop: "20px", marginRight: "10vw" }}
        >
          {/* 价格 */}
          <Form.Item
            label="商品名称"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input value={name} disabled style={{backgroundColor:"white",width:"300px",color:"#00CD00"}}/>
          </Form.Item>
          {/* 价格 */}
          <Form.Item
            name={['seckill', 'Price']}
            label="价格"
            initialValue={Number(Price)}

            rules={[
              {
                required: true,
                type: 'number',
              },
            ]}
          >
            <InputNumber />
          </Form.Item>
          {/* 是否上架 */}
          <Form.Item label="是否上架" valuePropName="checked">
            <Switch
              checkedChildren={<CheckOutlined />}
              unCheckedChildren={<CloseOutlined />}
              defaultChecked={() => State === "1" ? true : false}
              onChange={StateChange}
            />
          </Form.Item>
          {/* 单用户限购数量 */}
          <Form.Item
            name={['seckill', 'restricted']}
            label="单用户限购数量"
            initialValue={Number(restricted)}
            rules={[
              {
                type: 'number',
                required: true,

                min: 1,
              },
            ]}
          >
            <InputNumber />
          </Form.Item>

          {/* 销售总数 */}
          <Form.Item
            name={['seckill', 'Total']}
            label="销售总数"
            initialValue={Number(Total)}
            rules={[
              {
                type: 'number',
                required: true,
                min: 10,

              },
            ]}
          >
            <InputNumber />
          </Form.Item>

          {/* 已售总数 */}
          <Form.Item
            name={['seckill', 'Sold']}
            label="已售数量"
            initialValue={Number(Sold)}
            rules={[
              {
                type: 'number',
                required: true,

                min: 0,
              },
            ]}
          >
            <InputNumber />
          </Form.Item>
          {/* 活动类型 */}

          <Form.Item
            label="活动类型"

          >
            <Select
              showSearch
              style={{ width: 100 }}
              placeholder="选择一个类型"
              optionFilterProp="label"
              onChange={onChange}
              defaultValue={Sale_type}
              filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
              <Option value="普通">普通</Option>
              <Option value="限时秒杀">限时秒杀</Option>
              <Option value="万人团购">万人团购</Option>

            </Select>,
          </Form.Item>
          <Form.Item label="上架时间">
            <Space direction="vertical" size={100}>
              <RangePicker showTime={true}
                locale={locale}
                defaultValue={[moment(Start_time, dateFormat), moment(End_time, dateFormat)]}
                format={dateFormat}
                onCalendarChange={getDate}
              />
            </Space>,

          </Form.Item>
          <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
            <Button type="primary" htmlType="submit" >
              添加
            </Button>
          </Form.Item>
        </Form>
        <Modal title={`请再次确认是否将： ${name}  上线`} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
          <p> <span>价格：</span> <span>{Price}</span></p>
          <p> <span>单用户限购数量：</span> <span>{restricted}</span></p>
          <p> <span>销售总数：</span> <span>{Total}</span></p>
          <p> <span>已售总数：</span> <span>{Sold}</span></p>
          <p> <span>开始时间：</span> <span>{Start_time}</span></p>
          <p> <span>结束时间：</span> <span>{End_time}</span></p>
          <p> <span>活动类型：</span> <span>{Sale_type}</span></p>
          <p> <span>是否在售：</span> <span>{State === "1" ? "是" : "否"}</span></p>
        </Modal>
      </Card>
    </Space>
  )
}